<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>网络大数据</title>
	    <script src="js/jquery.min.js"></script>
      <script src="http://echarts.baidu.com/dist/echarts.js"></script>
      <script src="http://gallery.echartsjs.com/dep/echarts/latest/extension/bmap.min.js"></script>
      <script src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<style>
body{height:100%; width:100%; overflow:hidden;}
#main {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow:hidden; word-break:break-all;
  }
.anchorBL{display:none;}
</style>
  </head>
<body>
  <div id="main"></div>
<script type="text/javascript">
  var myecharts = echarts.getInstanceByDom(document.getElementById('main'));
  myecharts = echarts.init(document.getElementById('main'));
  var startPoint = {
    x:113.335989,
    y:22.970341
  };
  // 地图自定义样式
  var bmap = {
      center: [startPoint.x, startPoint.y],
      enableMapClick:false,
      zoom: 16,
      roam: 1, //缩放和拖拽
      mapStyle: {
          styleJson: [{
              "featureType": "water",
              "elementType": "all",
              "stylers": {
                  "color": "#034161"
              }
          }, {
              "featureType": "land",
              "elementType": "all",
              "stylers": {
                  "color": "#212c25"
              }
          }, {
              "featureType": "boundary",
              "elementType": "geometry",
              "stylers": {
                  "color": "#064f85"
              }
          }, {
              "featureType": "railway",
              "elementType": "all",
              "stylers": {
                  "visibility": "off"
              }
          }, {
              "featureType": "highway",
              "elementType": "geometry",
              "stylers": {
                  "color": "#004981"
              }
          }, {
              "featureType": "highway",
              "elementType": "geometry.fill",
              "stylers": {
                  "color": "#005b96",
                  "lightness": 1
              }
          }, {
              "featureType": "highway",
              "elementType": "labels",
              "stylers": {
                  "visibility": "off"
              }
          }, {
              "featureType": "arterial",
              "elementType": "geometry",
              "stylers": {
                  "color": "#004981"
              }
          }, {
              "featureType": "arterial",
              "elementType": "geometry.fill",
              "stylers": {
                  "color": "#00508b"
              }
          }, {
              "featureType": "poi",
              "elementType": "all",
              "stylers": {
                  "visibility": "off"
              }
          }, {
              "featureType": "green",
              "elementType": "all",
              "stylers": {
                  "color": "#056197",
                  "visibility": "off"
              }
          }, {
              "featureType": "subway",
              "elementType": "all",
              "stylers": {
                  "visibility": "off"
              }
          }, {
              "featureType": "manmade",
              "elementType": "all",
              "stylers": {
                  "visibility": "off"
              }
          }, {
              "featureType": "local",
              "elementType": "all",
              "stylers": {
                  "visibility": "on",
                  "color": "#056197"
              }
          }, {
              "featureType": "arterial",
              "elementType": "labels",
              "stylers": {
                  "visibility": "off"
              }
          }, {
              "featureType": "boundary",
              "elementType": "geometry.fill",
              "stylers": {
                  "color": "#029fd4"
              }
          }, {
              "featureType": "building",
              "elementType": "all",
              "stylers": {
                  "color": "#1a5787"
              }
          }, {
              "featureType": "label",
              "elementType": "all",
              "stylers": {
                  "visibility": "off"
              }
          }]
      }
  };

  var geoCoordMap = {
      '总部大楼': [113.341545, 22.977037],
      '海晴居': [113.328079, 22.966988],
      '俱乐部': [113.341657, 22.975161],
      '晋福楼': [113.327032, 22.968868],
      '名都': [113.328851, 22.970594],
      '医院': [113.332925, 22.974338],
      '缤纷世界': [113.338818, 22.976064],
      '国际公寓': [113.33942, 22.97744]
  };

  var BJData = [
      [{
          name: '总部大楼'
      }, {
          name: '海晴居',
          value: 95
      }],
      [{
          name: '总部大楼'
      }, {
          name: '俱乐部',
          value: 90
      }],
      [{
          name: '总部大楼'
      }, {
          name: '缤纷世界',
          value: 60
      }],
      [{
          name: '总部大楼'
      }, {
          name: '国际公寓',
          value: 50
      }]
  ];

  var SHData = [
      [{
          name: '海晴居'
      }, {
          name: '晋福楼',
          value: 90
      }],
      [{
          name: '海晴居'
      }, {
          name: '医院',
          value: 80
      }]
  ];

  var GZData = [
      [{
          name: '晋福楼'
      }, {
          name: '名都',
          value: 90
      }]
  ];

  var convertData = function(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = geoCoordMap[dataItem[0].name];
          var toCoord = geoCoordMap[dataItem[1].name];
          if (fromCoord && toCoord) {
              res.push({
                  fromName: dataItem[0].name,
                  toName: dataItem[1].name,
                  coords: [fromCoord, toCoord]
              });
          }
      }
      return res;
  };

  var color = ['#a8ff60', '#1ecdea', '#a8ff60'];
  var series = [];
  [
      ['总部大楼', BJData],
      ['海晴居', SHData],
      ['晋福楼', GZData]
  ].forEach(function(item, i) {
      series.push({
          name: item[0] + ' Top1',
          type: 'effectScatter',
          roam: false,
          coordinateSystem: 'bmap',
          zlevel: 2,
          rippleEffect: {
              brushType: 'stroke'
          },
          label: {
              normal: {
                  show: true,
                  position: 'right',
                  formatter: '{b}'
              }
          },
          symbolSize: function(val) {
              return 12;
          },
          showEffectOn: 'render',
          itemStyle: {
              normal: {
                  color: color[i]
              }
          },
          data: [{
              name: item[0],
              value: geoCoordMap[item[0]].concat([100])
          }]
      }, {
          name: item[0],
          type: 'lines',
          coordinateSystem: 'bmap',
          zlevel: 1,
          effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: color[i],
              symbolSize: 3
          },
          lineStyle: {
              normal: {
                  color: color[i],
                  width: 0,
                  curveness: 0.2
              }
          },
          data: convertData(item[1])
      }, {
          name: item[0] + '测试',
          type: 'lines',
          coordinateSystem: 'bmap',
          zlevel: 2,
          effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: 'circle', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
              symbolSize: 1
          },
          lineStyle: {
              normal: {
                  color: color[i],
                  width: 1,
                  opacity: 0.4,
                  curveness: 0.2
              }
          },
          data: convertData(item[1])
      }, {
          name: item[0],
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          zlevel: 2,
          rippleEffect: {
              brushType: 'stroke'
          },
          label: {
              normal: {
                  show: true,
                  position: 'right',
                  formatter: '{b}'
              }
          },
          symbolSize: function(val) {
              return 12;
          },
          showEffectOn: 'render',
          itemStyle: {
              normal: {
                  color: color[i]
              }
          },
          data: item[1].map(function(dataItem) {
              return {
                  name: dataItem[1].name,
                  value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
              };
          })
      });
  });

  option = {
      bmap: bmap,
      color: ['gold', 'aqua', 'lime'],
      backgroundColor: '#404a59',
      title: {
          show: false,
          text: '集团网络大数据',
          left: 'left',
          textStyle: {
              color: '#fff'
          }
      },
      tooltip: {
          trigger: 'item'
      },
      legend: {
          orient: 'vertical',
          top: 'bottom',
          left: 'right',
          data: ['总部大楼 ', '海晴居 ', '晋福楼 '],
          textStyle: {
              color: '#fff'
          },
          selectedMode: 'multiple'
      },
      geo: {
          map: 'bmap',
          polyline: true,
          progressiveThreshold: 500,
          progressive: 200,
          label: {
              emphasis: {
                  show: false
              }
          },
          roam: true,
          itemStyle: {
              normal: {
                  areaColor: '#323c48',
                  borderColor: '#404a59'
              },
              emphasis: {
                  areaColor: '#2a333d'
              }
          }
      },
      series: series
  };



  myecharts.setOption(option);






</script>
  </body>
</html>
